<template>
    <div :style="carStyle">
        <iframe v-if="iframeUrl != ''" :src="iframeUrl" frameborder="0" width="100%" height="100%"></iframe>
        <div class="defaultText" v-else>请选择文件资源</div>
    </div>
</template>

<script>
// import axios from "axios"

export default {
    Name: "FileData",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            carStyle: {},
            iframeUrl: "",
            parentId: "",
        }
    },
    mounted() {
        this.setStyle();
        this.getfileurl();
    },
    methods: {
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                padding: "10px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }
        },
        getfileurl() {
            if (this.obj.fileUrl != "") {
                this.parentId = this.obj.fileUrl;
                axios({
                    method: "GET",
                    url: process.env.VUE_APP_FILE_GETPATH,
                    params: { fileid: this.obj.fileUrl },
                    timeout: 10000,
                }).then((res) => {
                    if (res.data.code == 0) {
                        this.iframeUrl = process.env.VUE_APP_FILE_HOST + "/ViewerJS/#" + res.data.data.path;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
        },
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
                if (this.parentId != this.obj.fileUrl) {
                    this.getfileurl();
                }
            }
        }
    },
}
</script>